<template>
<div class="person_mainly">
     <!-- 个人信息介绍 -->
    <div class="person-info">
        <!-- 个人介绍 -->
        <div class="person-title">
            <span class="title-left">个人介绍</span>
        </div>
        <div class="info-detail">
            <p class="info-p1">{{MInfo.name}}</p>
            <div class="info-p2">
                <p>
                    <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-leixing"></use>
                    </svg>
                    <span>{{MInfo.industry}}</span>
                </p>
                <p>
                    <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-xingbie1"></use>
                    </svg>
                    <span>{{MInfo.sex?'女':'男'}}</span>
                </p>
                <p>
                    <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-xuanzezeounianling"></use>
                    </svg>
                    <span>{{MInfo.age}}岁</span>
                </p>
            </div>
            <!-- 角色 -->
            <p class="info-p3">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-jiaose"></use>
                </svg>
                <span>角色：</span>
                <span class="squre" v-for="(item,index) in MInfo.Arr_part" :key="index">{{item}}</span>  
            </p>
            <!-- 技能 -->
            <p class="info-p3">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-label"></use>
                </svg>
                <span>技能：</span>
                <span class="squre" v-for="(item,index) in MInfo.Arr_tags" :key="index">{{item}}</span> 
            </p>
            <!-- 其他属性汇总 -->
            <div class="extra-goods">
            <!-- 电话 -->
            <p class="info-p4">
              <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-dianhua11"></use>
              </svg>
              <span>联系方式：</span>
              <span class="squre">{{MInfo.mobile}}</span>
            </p>
            <!-- 其他特点 -->
            <div class="info-p6">
              <p>
                  <svg class="icon" aria-hidden="true">
                      <use xlink:href="#icon-xiaolian"></use>
                  </svg>
                  <span>容貌：</span>
                  <span class="p6-last">{{MInfo.physique}}</span>
              </p>
              <p>
                  <svg class="icon" aria-hidden="true">
                      <use xlink:href="#icon-tizhi"></use>
                  </svg>
                  <span>身高：</span>
                  <span  class="p6-last">{{MInfo.height}}cm</span>
              </p>
              <p>
                  <svg class="icon" aria-hidden="true">
                      <use xlink:href="#icon-dizhi2"></use>
                  </svg>
                  <span>气质：</span>
                  <span>{{MInfo.looks}}</span>
              </p>
            </div>
          </div>
        </div>
        <!-- 居住地址 -->
        <div class="address-title">
                <span>居住地址</span>
        </div>
        <!-- 位置信息  -->
        <div class="address-info border-bottom" >
            <p>
                <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-dizhi2"></use>
                </svg>
                <span>{{MInfo.provinces}} {{MInfo.address}}</span>
            </p>
        </div>
    </div>
    <!-- 经历 -->
    <div class="experience">
        <!-- 工作经历 -->
        <div class="project-example">
            <div class="project-title">
                    <span class="title-left">工作经历</span>
            </div>
            <div class="project-process border-bottom">
              <div v-for="(item,index) in workExperience" :key="index">
                   <div class="process-p1">  
                      <p>
                          <span>{{item.company}}</span>
                          <span class="p1-right">{{item.jobtime}}</span>
                          <span class="circle01"></span>
                      </p>
                    </div>
                    <div class="process-p2">
                        <p>{{item.position}}<span class="circle02"></span></p>
                    </div>
                    <div class="process-p2">
                         <p>薪资：<span>{{item.salary}}</span><span class="circle02"></span></p>
                    </div>  
                    <div class="process-p2">
                         <p>证明人及电话：<span>{{item.witnessphone}}</span><span class="circle02"></span></p>
                    </div>  
                    <div class="process-p2">
                        <p>工作内容<span class="circle02"></span></p>
                        <p>{{item.responsibility}}</p>

                        <p>工作业绩<span class="circle02"></span></p>
                        <p>{{item.performance}}</p>    
                    </div>
              </div>
            </div>
        </div>
        <!-- 教育经历 -->
        <div class="project-example">
            <div class="project-title">
                <span class="title-left">教育经历</span>
            </div>
            <div class="project-process border-bottom">
               <div v-for="(item,index) in edubg" :key="index">
                <div class="process-p1">  
                      <p>
                          <span>{{item.school}}</span>
                          <span class="p1-right">{{item.graduatedt}}</span>
                          <span class="circle01"></span>
                      </p>
                    </div>
                    <div class="process-px">  
                        <p>
                            <span>{{item.major}}</span>
                            <span class="fenge01"></span>
                            <span>{{item.degree}}</span>
                            <span class="circle01"></span>
                        </p> 
                    </div>
                    <div class="process-p2">
                        <p>所学技能：<span class="circle02"></span></p>
                        <p>{{item.description}}</p>  
                    </div>
              </div> 
            </div>
        </div>
        <!-- 离职分析 -->
        <div class="project-example">
            <div class="project-title">
               <span class="title-left">离职分析</span>
            </div>
            <div class="project-process border-bottom">
                <div v-for="(item,index) in turnoveranalysis" :key="index">
                    <div class="process-p1">  
                      <p>
                          <span>{{item.companyname}}</span>
                          <span class="p1-right">{{item.str_addtime}}</span>
                          <span class="circle01"></span>
                      </p>     
                    </div>
                    <div class="process-p2">
                       <p>离职原因<span class="circle02"></span></p>
                       <p>{{item.reason}}</p>
                    </div>
                    <div class="process-p2">
                      <p>离职前一个月做了什么？<span class="circle02"></span></p>
                      <p>{{item.premonth}}</p>
                    </div>  
                    <div class="process-p2">
                      <p>离职后一个月做了什么？<span class="circle02"></span></p>
                      <p>{{item.nextmonth}}</p>
                    </div> 
                </div>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
import { GetPerInfo } from "@/api/zgz";
export default {
  data() {
    return {
      MInfo: {},
      workExperience: [],
      edubg: [],
      turnoveranalysis: []
    };
  },
  props: {
    id: Number
  },
  beforeMount: function() {
    this.$nextTick(function() {
      this._getPerInfo();
    });
  },
  methods: {
    // 获取数据
    _getPerInfo() {
      this.$indicator.open();
      setTimeout(() => {
        GetPerInfo(this.id).then(res => {
          if (res.StatusCode === 200) {
            this.MInfo = res.Data.MInfo;
            this.workExperience = res.Data.workExperience;
            this.edubg = res.Data.edubg;
            this.turnoveranalysis = res.Data.turnoveranalysis;
            this.$indicator.close();
          }
        });
      }, 400);
    }
  }
};
</script>

<style lang="scss" scoped>
@import '~@/css/total';
.person_mainly {
  padding-bottom: 50px;
}
.person-info {
  // 标题
  .person-title {
    height: 58.3px;
    width: 100%;
    padding-left: 12px;
    border-bottom: 1px solid #eeeeee;
    overflow: hidden;
    .title-left {
      line-height: 58.3px;
      font-size: 16px;
      color: #282828;
      font-weight: #282828;
      display: inline-block;
      float: left;
      font-weight: bolder;
    }
    .title-right {
      display: inline-block;
      float: right;
      line-height: 58.3px;
      margin-right: 12px;
      font-size: 12px;
      color: #999999;

      > span {
        display: block;
        float: left;
      }
      > .icon {
        display: block;
        float: left;
        margin-top: 22px;
      }
    }
  }
  // 详细信息
  .info-detail {
    padding-left: 12px;
    padding-top: 23px;
    padding-bottom: 14px;
    border-bottom: 10px solid #f4f4f4;
    font-size: 14px !important;
    .info-p1 {
      color: #282828;
      font-size: 16px;
      margin-bottom: 15px;
    }
    .info-p2 {
      overflow: hidden;
      margin-bottom: 16px;

      > p {
        float: left;

        color: #666666;
        margin-right: 22px;
        > span {
          float: left;
          display: block;
        }
        > .icon {
          float: left;
          display: block;
          margin-top: 3px;
          margin-right: 9px;
          color: #999999;
        }
      }
    }
    // 角色
    .info-p3 {
      overflow: hidden;

      .icon {
        color: #999999;
      }

      > span {
        color: #999999;
        display: block;
        float: left;
      }
      > :nth-child(2) {
        color: #666666;

        margin-top: 3.3px;
        margin-right: 10px;
        padding-bottom: 20px;
      }
      > .icon {
        display: block;
        float: left;

        margin-right: 9px;
        margin-top: 5.3px;
      }
      .squre {
        padding: 1.2px 3.5px;
        border: 1px solid #999999;
        border-radius: 11.5px;
        margin-right: 8px;
        margin-bottom: 8px;
      }
    }
    // 其他属性汇总
    .extra-goods {
      color: #666666;
      font-size: 14px;
      margin-top: 4px;
      > p {
        margin-bottom: 15px;
      }
      .icon {
        color: #999999;
        display: block;
        float: left;
        margin-top: 3px;
        margin-right: 9px;
      }
      > :last-child {
        overflow: hidden;
        > p {
          float: left;
          > span {
            display: block;
            float: left;
            margin-right: 9px;
          }
          .p6-last {
            margin-right: 33px;
          }
        }
      }
    }
  }
  // 地址标题
  .address-title {
    height: 58.3px;
    width: 100%;
    line-height: 58.3px;
    border-bottom: 1px solid #eeeeee;
    padding-left: 12px;
    > span {
      color: #282828;
      font-size: 16px;
      font-weight: bolder;
      display: block;
      float: left;
    }
  }
  // 地址详细信息
  .address-info {
    padding: 22px 12px;
    border-bottom: 10px solid #f4f4f4;
    > :first-child {
      font-size: 14px;
      color: #282828;
      margin-bottom: 12px;
      overflow: hidden;
      .icon {
        color: #999999;
        display: block;
        float: left;
        margin-top: 3px;
        margin-right: 8px;
      }
      > span {
        display: block;
        float: left;
      }
    }
    > :last-child {
      color: #999999;
      font-size: 14px;
      overflow: hidden;
      padding-left: 4px;
      > span {
        display: block;
        float: left;
      }
      .long {
        margin-right: 5px;
        margin-left: 18px;
      }
    }
  }
}
// 公司标题

.project-title {
  height: 58.3px;
  width: 100%;
  padding-left: 12px;
  border-bottom: 1px solid #eeeeee;
  overflow: hidden;
  .title-left {
    line-height: 58.3px;
    font-size: 16px;
    color: #282828;
    font-weight: #282828;
    display: inline-block;
    float: left;
    font-weight: bolder;
  }
  .title-right {
    display: inline-block;
    float: right;
    line-height: 58.3px;
    margin-right: 12px;
    font-size: 12px;
    color: #999999;

    > span {
      display: block;
      float: left;
    }
    > .icon {
      display: block;
      float: left;
      margin-top: 22px;
    }
  }
}
// 每个版块儿底边框设置
.border-bottom {
  border-bottom: 9px solid #f4f4f4;
}
// 项目案例
.project-example {
  .project-process {
    padding: 22px 12px;
    .process-p1 {
      overflow: hidden;
      padding-bottom: 15px;
      border-left: 1px dashed #d6d6d6;
      > p {
        overflow: hidden;
        margin-left: 12px;
        margin-bottom: 12px;
        color: #999999;
        .circle01 {
          display: block;
          width: 12px;
          height: 12px;
          border-radius: 50%;
          border: 1px solid #3887fe;
          margin-top: 3px;
          margin-right: 8.3px;
          background: white;
          position: absolute;
          left: 6.01px;
          margin-top: 1px;
        }
        > :nth-child(1) {
          display: block;
          float: left;
          color: #282828;
          line-height: 18px;
          font-size: 16px;
        }
        > :nth-child(2) {
          display: block;
          float: right;
          color: #666666;
          line-height: 15px;
          font-size: 14px;
        }
      }
    }
    .process-p2 {
      font-size: 14px;
      padding-bottom: 8px;
      border-left: 1px dashed #d6d6d6;
      > p {
        color: #666666;
        margin-bottom: 13px;
        margin-left: 12px;
      }
      > :first-child {
        margin-left: 12px;

        margin-bottom: 13px;
        .circle02 {
          display: block;
          width: 8.3px;
          height: 8.3px;
          border-radius: 50%;
          border: 1px solid #d6d6d6;
          margin-top: 3px;
          margin-right: 8.3px;
          background: #d6d6d6;
          position: absolute;
          left: 7.85px;
          margin-top: -14px;
        }
      }
    }
    // 合作单位
    .process-p3 {
      font-size: 14px;
      padding-bottom: 22px;
      border-left: 1px dashed #d6d6d6;
      > p {
        color: #999999;
        margin-bottom: 13px;
        margin-left: 12px;
      }
      > :first-child {
        margin-left: 12px;
        color: #282828;
        margin-bottom: 13px;
        .circle03 {
          display: block;
          width: 8.3px;
          height: 8.3px;
          border-radius: 50%;
          border: 1px solid #d6d6d6;
          margin-top: 3px;
          margin-right: 8.3px;
          background: #d6d6d6;
          position: absolute;
          left: 7.85px;
          margin-top: -15px;
        }
      }
    }
    // 项目图片
    .process-p4 {
      font-size: 10px;
      padding-bottom: 12px;
      border-left: 1px dashed #d6d6d6;
      overflow: hidden;
      > p {
        color: #999999;
        margin-bottom: 13px;
        margin-left: 12px;
      }
      > :first-child {
        margin-left: 12px;
        color: #282828;
        margin-bottom: 13px;
        .circle04 {
          display: block;
          width: 8.3px;
          height: 8.3px;
          border-radius: 50%;
          border: 1px solid #d6d6d6;
          margin-top: 3px;
          margin-right: 8.3px;
          background: #d6d6d6;
          position: absolute;
          left: 7.85px;
          margin-top: -15px;
        }
      }
      .img-box {
        margin-left: 12px;
        > div {
          display: block;
          width: 110.66px;
          height: 66.66px;
          float: left;
          margin-right: 13px;
          > img {
            @include img-auto;
          }
        }
      }
    }
    // 展开
    .detail-p2 {
      margin-top: 21px;

      color: #999999;
      overflow: hidden;
      > span {
        display: block;
        float: left;
        margin-left: 172.65px;
        font-size: 14px;
      }
      > .icon {
        display: block;
        float: left;
        margin-left: 9px;
        margin-top: 3px;
      }
    }
  }
}
.project-process {
  padding: 22px 12px;
  .process-px {
    overflow: hidden;
    padding-bottom: 8px;
    border-left: 1px dashed #d6d6d6;
    > p {
      overflow: hidden;
      margin-left: 12px;
      margin-bottom: 12px;
      color: #666666;

      > span {
        display: block;
        float: left;
        line-height: 15px;
        font-size: 14px;
      }
      .circle01 {
        display: block;
        width: 8.3px;
        height: 8.3px;
        border-radius: 50%;
        border: 1px solid #d6d6d6;
        margin-top: 3px;
        margin-right: 8.3px;
        background: #d6d6d6;
        position: absolute;
        left: 7.85px;
        margin-top: 2px;
      }
      .fenge01 {
        width: 1px;
        height: 11.3px;
        border: 1px solid #999999;
        margin-top: 2px;
        margin-left: 14.6px;
        margin-right: 14.6px;
      }
    }
  }
}
</style>
